<template>
    <div class="projects">
        <div >
            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="position: relative;left: 100px">
                <el-form-item label="房源名" prop="name">
                    <el-input
                            v-model="queryParams.name"
                            placeholder="请输入房源名"
                            clearable
                            size="small"
                    />
                </el-form-item>
                <el-form-item label="房源地址" prop="address">
                    <el-input
                            v-model="queryParams.address"
                            placeholder="请输入房源地址"
                            clearable
                            size="small"
                    />
                </el-form-item>
                <el-form-item label="房源价格" prop="price">
                    <el-input
                            v-model="queryParams.price"
                            placeholder="请输入房源价格"
                            clearable
                            size="small"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="listDataApi()">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="wrapper">
            <div class="title">所有景点</div>
            <div class="project" v-for="item in houseList" :key="item.id" @click="goDetail(item.id)">
                <div class="left">
                    <img
                            width="100%"
                            :src="item.pic"
                            alt=""
                    />
                </div>
                <div class="right">
                    <div class="intro" style="font-weight: bold">房源名：{{item.name}}</div>
                    <div class="intro">地址：{{item.address}}</div>
                    <div class="intro">房源简介：{{item.instruction}}</div>
                    <div class="intro">是否热门：{{item.hot}}</div>
                </div>
            </div>
        </div>
        <div class="fr-el-page" style="text-align: center">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryParams.pageNum"
                    :page-sizes="[4]"
                    :page-size="queryParams.pageSize"
                    layout="total, sizes, prev, pager, next"
                    :total="queryParams.total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import { getHouse,getToken} from "@/utils/request";
    export default {
        name: "House",
        data(){
            return{
                houseList:[],
                queryParams: {
                    name:null,
                    address:null,
                    price:null,
                    pageNum: 1,
                    pageSize: 4,
                    total:0
                },
            }
        },
        methods:{
            // 查询全部数据
            listDataApi(){
                getHouse(this.queryParams).then(res => {
                    if(res.code == 200){
                        this.houseList = res.rows;
                        this.queryParams.total=res.total;
                    }else{
                        this.$message({
                            type:'error',
                            message:res.msg
                        })
                    }
                })
            },
            handleSizeChange(val) {
                this.queryParams.pageSize=val;
                this.queryParams.pageNum=val;
                this.listDataApi();
            },
            handleCurrentChange(val) {
                this.queryParams.pageNum=val;
                this.queryParams.pageNum=val;
                this.listDataApi();
            },
            goDetail(id){
                // 跳转到详情页面，并且传递id
                this.$router.push({path:'/houseDetail',query:{id:id}})
            },
        },
        created() {
            this.listDataApi();
        }
    }

</script>

<style scoped lang="scss">
    .titlee{
        font-weight: bold;
    }
    .intro{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        padding-top: 20px;
    }
    .projects {
        .wrapper {
            width: 1240px;
            .title {
                font-size: 20px;
                line-height: 80px;
                border-bottom: 1px solid #f4f4f4;
            }
            .project {
                display: flex;
                padding: 1em 0;
                border-bottom: 1px solid #f4f4f4;
                .left {
                    width: 300px;
                    height: 200px;
                    background-color: #f4f4f4;
                    border-radius: 5px;
                    overflow: hidden;
                }
                .right {
                    flex: 1;
                    padding: 0 2em;
                    .name {
                        font-weight: bolder;
                        font-size: 1em;
                    }
                    .date {
                        margin: 1em 0;
                    }
                }
            }
        }
    }


</style>
